<!--
 * @Description: rtsp_ffmpeg_node_websoket_flv   此方案需启动node服务,server
 * @Author: xuzp4
 * @Date: 2021-11-17 10:25:01
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-09-23 10:12:47
 * @FilePath: \vue_demo\src\view\video3\index.vue
-->
<template>
  <div>
    <video class="demo-video" ref="player" muted autoplay controls></video>
  </div>
</template>
<script>
import flvjs from "flv.js";
export default {
  data() {
    return {
      id: "1",
      rtsp: "rtsp://admin:Sany1234@10.11.193.80/cam/realmonitor",
      channel:1,
      subtype:0,
      player: null,
    };
  },
  mounted() {
    if (flvjs.isSupported()) {
      let video = this.$refs.player;
      if (video) {
        this.player = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}&channel=${this.channel}&subtype=${this.subtype}`,
        });
        this.player.attachMediaElement(video);
        try {
          this.player.load();
          this.player.play();
        } catch (error) {
          console.log(error);
        }
      }
      // if (video) {
      //     this.player = flvjs.createPlayer({
      //         type: "flv",
      //         url: `/static/test.flv`
      //     });
      //     this.player.attachMediaElement(video);
      //     try {
      //         this.player.load();
      //         this.player.play();
      //     } catch (error) {
      //         console.log(error);
      //     };
      // }
    }
  },
  beforeDestroy() {
    this.player.destory();
  },
};
</script>
<style>
.demo-video {
  max-width: 880px;
  max-height: 660px;
}
</style>